<template>
  <!-- 左侧地图 -->
  <el-row :gutter="20">
    <el-col :span="18">
      <el-card>
        <MapContainer></MapContainer>
      </el-card>
    </el-col>
    <el-col :span="6">
      <!-- 右侧表单 -->
      <el-card class="des">
        <div>1.累计充电站数量：<el-text type="primary">34个</el-text></div>
        <div>2.单省份最多充电桩：<el-text type="primary">北京(4个)</el-text></div>
        <div>3.充电站遍及省份：<el-text type="primary">14个</el-text></div>
        <div>4.暂无充电站省份：<el-text type="primary">22个</el-text></div>
        <div>5.累计充电站：<el-text type="primary">北京(4个)</el-text></div>
        <div>6.单日营收最高：<el-text type="primary">北京西单充电站</el-text></div>
        <div>7.单日营收最低：<el-text type="primary">南宁青秀山充电站</el-text></div>
        <div>8.故障率最高：<el-text type="primary">兰州黄河桥充电站</el-text></div>
      </el-card>
      <el-card class="mt">
        <template #header>
          <div class="card-header">
            <h3>新增站点地图</h3>
          </div>
        </template>
        <el-form :model="form" style="max-width: 600px;" label-width="85px">
          <el-form-item label="站点名称：">
            <el-input placeholder="请输入站点名称" v-model="form.name" />
          </el-form-item>
          <el-form-item label="站点地址">
            <el-input placeholder="请输入站点地址" v-model="form.region" />
          </el-form-item>
          <el-form-item label="经度：">
            <el-input placeholder="请输入经度" v-model="form.location1" />
          </el-form-item>
          <el-form-item label="维度：">
            <el-input placeholder="请输入维度" v-model="form.location2" />
          </el-form-item>
          <el-form-item label="立即使用：">
            <el-switch v-model="form.now" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input placeholder="请输入备注" type="textarea" v-model="form.remarks" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">创建</el-button>
            <el-button @click="handleReset">清空</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import MapContainer from '@/components/map/MapContainer.vue';
import { reactive } from "vue";
import { mapListApi } from "@/api/map";
import { ElMessage } from "element-plus";

const form = reactive({
  name: "",
  region: "",
  location1: "",
  location2: "",
  now: false,
  remarks: ""
});

// 提交表单数据
const handleSubmit = async () => {
  // 验证表单是否为空
  const isFormEmpty = Object.values(form).every(value => !value);
  if (isFormEmpty) {
    ElMessage.warning("请填写表单内容");
    return;
  }

  try {
    // 调用后端接口提交表单数据
    await mapListApi(form);
    // 提示提交成功
    ElMessage.success("提交成功");
  } catch (error) {
    // 提示提交失败
    ElMessage.error("提交失败，请稍后重试");
  }
};

// 清空表单数据
const handleReset = () => {
  form.name = "";
  form.region = "";
  form.location1 = "";
  form.location2 = "";
  form.now = false;
  form.remarks = "";
};
</script>

<style scoped lang="less">
.des {
  line-height: 35px;
}

.mt {
  margin-top: 20px;
}
</style>